<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="true"
      :append-to-body="true"
      class="small-common-dialog-size"
      width="240px"
      @closed="handleClose"
    >
      <Title title="接收微信号编辑" font-size="16px" style="margin-bottom:20px;"/>
      <el-form ref="wxCodeForm" :model="paramsObj" class="el-form-box-left" label-width="90px">
        <el-form-item label="接收微信号" prop="code" style="margin-bottom:0px;">
          <el-input v-model="paramsObj.code" style="width:240px;" maxlength="20" size="small" placeholder="请输入" @input="onWxCodeChange"/>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" style="margin-top:30px;">
        <el-button class="cancel" size="small" @click="handleClose">取消</el-button>
        <el-button class="ok" size="small" type="primary" @click="onConfirm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/Title';

export default {
  components: { Title },
  data() {
    return {
      dialogVisible: false,
      paramsObj: {
        code: ''
      }
    };
  },
  methods: {
    openDialog(code = '') {
      this.$set(this.paramsObj, 'code', code);
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.paramsObj = {};
    },
    // 禁止输入中文
    onWxCodeChange() {
      this.paramsObj.code = this.paramsObj.code.replace(/[\u4e00-\u9fa5]/g, '').trim();
    },
    onConfirm() {
      this.$emit('onConfirm', this.paramsObj.code);
      this.handleClose();
    }
  }
};
</script>

<style lang='scss' scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  .ok {
    width: 120px;
    font-size: 14px;
  }
  .cancel {
    width: 80px;
    font-size: 14px;
    color: #406EFF;
    background:rgba(239,243,251,1);
    border: none;
  }
}
</style>
